<template>
    <div>
         <nav-bar>
             <template v-slot:left>
                 <img src="~assets/img/common/back.png" alt="" class="back" @click="backClick">
             </template>
            <template v-slot:center>
                <span class="title">
                    <div v-for="(item, index) in title" :key="(item, index)" 
                    class="title-item" 
                    :class="{active: index === currentIndex}"
                    @click="titleClick(index)"
                    >
                    {{item}}
                    </div>
                    </span>
                </template>
        </nav-bar>
    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'

export default {
  name: "DetailNavBar",
  components: {
       NavBar
  },
  data() {
      return {
          title: ['商品', '参数', '评论', '推荐'],
          currentIndex: 0
      }
  },
  methods: {
      titleClick(index) {
          this.currentIndex = index
      },
      backClick() {
          this.$router.back()
      }
  }
}
</script>

<style scoped>
  .title {
      display: flex;
      font-size: 14px;
  }
  .title-item {
      flex: 1;
  }
  .active {
      color: pink;
  }
  .back {
    width: 25px;
    height: 25px;
    margin-top: 9px;
  }
</style>